<script setup>

const props = defineProps({
    title: {type: String, required: true},
    content: {type: String, required: true}
});
console.log(props);
</script>

<template>
    <div className="message-container">
    <div className="message-view">
      <div className="message-title">{{props.title}}</div>
      <div className="message-content">{{props.content}}</div>
    </div>
  </div>
</template>

<style scoped>
.message-container{
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100%; background: rgba(0, 0, 0, .2);
}
.message-view{
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%);
  max-width: 66%;
  box-shadow: 5px 5px 20px #e4e4e4; border-radius: 12px; background: #fff;
}
.message-title{
  line-height: 30px; border-bottom: 1px solid rgba(0,0,0, .04);
  padding: 0 20px; font-size: 16px; text-align: left;
}
.message-content{
  padding: 10px 20px;
  font-size: 14px; line-height: 20px; text-align: left;
}

</style>
    